
const { form, layer } = layui;

$(function () {

    const $image = $('#image');

    // options配置选项声明常量
    const options = {
        //纵横比1:1
        aspectRatio: 1,
        //图片预览区
        preview: '.img-preview'
    }
    //调用裁剪方法-----创建裁剪区域
    $image.cropper(options);

    // 点击上传按钮的回调
    $('#btnChooseImage').click(() => {
        $('#file').click();
    });

    // 为文件选择框绑定 change 事件
    $('#file').change(e => {
        const { files } = e.target;
        if (files.length === 0) {
            layer.msg('请选择头像');
            return;
        }
        const file = files[0];
        const imageUrl = URL.createObjectURL(file);
        console.log(imageUrl);
        $image.cropper('destroy').attr('src', imageUrl).cropper(options);
    });

    // 头像上传
    $('#btnUpload').click(() => {
        const avatar = $image.cropper('getCroppedCanvas', { width: 100, height: 100 }).toDataURL('image/png');
        $.post('/my/update/avatar', { avatar }, result => {
            const { status } = result;
            if (status === 0) {
                layer.msg('更换头像成功');
                window.parent.reqUserInfo();
            } else {
                layer.msg('更换头像失败')
            }
        })

    })
})